import { getViewConfDefault,postViewconf,updateViewconf } from '@/api/view-conf'
import { uploadFile } from '@/api/product'

export default {
  name: "ViewConf",
  components: {},
  props: [],
  data() {
    return {
      formData: {
        id: undefined,
        live_id: undefined,
        cover_file_id: undefined,
        started_at: undefined,
        ended_at: undefined,
        time_range: undefined,
        cover: undefined,
      },
      rules: {
        live_id: [{
          required: true,
          message: '直播间ID不能为空',
          trigger: 'blur'
        }]
      },
      fileList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      getViewConfDefault().then(res => {
        let data = res.view_conf
        let formData = {
          id: data.id,
          name: data.name,
          live_id: data.live_id
        }
        if(data.cover){
          formData.cover = data.cover
          formData.cover_file_id = data.cover.id
          this.fileList = [
            { name:data.cover.id,url:data.cover.url}
          ]
        }
        if(data.started_at && data.ended_at){
          formData.time_range = [
            this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.started_at)),
            this.dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data.ended_at))
          ]
        }
        this.formData = formData
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const formData = this.formData
        let data = {
          name:formData.name ? formData.name : 'DEFAULT',
          live_id:formData.live_id,
        }
        if(formData.cover_file_id){
          data.cover_file_id = formData.cover_file_id
        }
        if(formData.time_range){
          data.started_at = formData.time_range[0]
          data.ended_at = formData.time_range[1]
        }
        if(formData.id){
          updateViewconf(formData.id,data).then(res => {
            this.init()
          })
        }else{
          postViewconf(data).then(res => {
            this.init()
          })
        }
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handleUploadPic: async function(data){
      console.log(data)
      const formData = new FormData()
      formData.append('file', data.file)
      const res = await uploadFile(formData)
      this.formData.cover_file_id = res.file.id
      this.fileList = [{ name:res.file.id,url:res.file.url}]
    },
    onRemovePic(){
      this.fileList = []
      this.formData.cover_file_id = null
    },

    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
      };
      return fmt;
    }
  }
}


